.status-indicator-container {
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: none;
  padding: 10px 0;
}

.status-indicator {
  display: flex;
  align-items: center;
  position: relative;
  height: 41px; // 每个指示器的高度
  cursor: pointer;
  transition: all 0.3s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  &:hover {
    .indicator-dot {
      transform: scale(1.1);
      filter: brightness(1.2);
    }
    
    .indicator-title,
    .indicator-value,
    .indicator-unit {
      filter: brightness(1.1);
    }
  }
  
  &:active {
    .indicator-dot {
      transform: scale(0.95);
    }
  }
  
  .indicator-dot {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s ease;
    animation: pulse 2s infinite ease-in-out;
  }
  
  .indicator-title {
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    text-align: left;
    transition: color 0.3s ease;
  }
  
  .indicator-value {
    position: absolute;
    left: 148px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    text-align: left;
    transition: all 0.3s ease;
  }
  
  .indicator-unit {
    position: absolute;
    margin-left: 50px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    text-align: right;
    transition: color 0.3s ease;
  }

  // 主题样式
  &.theme-light {
    .indicator-title,
    .indicator-value,
    .indicator-unit {
      color: #333333;
      text-shadow: none;
    }
    
    .indicator-dot {
      box-shadow: 0px 0px 4px 2px rgba(0,139,255,0.3);
    }
  }

  &.theme-dark {
    // 深色主题样式（默认）
    .indicator-title,
    .indicator-value,
    .indicator-unit {
      text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    }
  }

  // 响应式设计
  @media (max-width: 1920px) {
    transform: scale(0.9);
    transform-origin: left center;
    height: 37px;
    
    .indicator-dot {
      left: 15px;
    }
    
    .indicator-title {
      left: 31px;
    }
    
    .indicator-value {
      left: 133px;
    }
    
    .indicator-unit {
      left: 180px;
    }
  }

  @media (max-width: 1366px) {
    transform: scale(0.8);
    height: 33px;
    
    .indicator-dot {
      left: 14px;
    }
    
    .indicator-title {
      left: 28px;
    }
    
    .indicator-value {
      left: 118px;
    }
    
    .indicator-unit {
      left: 160px;
    }
  }

  // 动画效果
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
    }
  }

  // 禁用状态
  &.disabled {
    cursor: not-allowed;
    opacity: 0.6;
    
    .indicator-dot {
      animation: none;
    }
    
    &:hover {
      .indicator-dot,
      .indicator-title,
      .indicator-value,
      .indicator-unit {
        transform: none;
        filter: none;
      }
    }
  }

  // 高对比度模式
  @media (prefers-contrast: high) {
    .indicator-title,
    .indicator-value,
    .indicator-unit {
      text-shadow: 1px 1px 0px #000000;
    }
    
    .indicator-dot {
      border: 1px solid #FFFFFF;
    }
  }

  // 减少动画模式
  @media (prefers-reduced-motion: reduce) {
    .indicator-dot {
      animation: none;
    }
    
    * {
      transition: none;
    }
  }
} 